import React, { Component } from 'react';
import moment from 'moment';
import axios from 'axios';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Row, Col, Card, Tag, Icon } from 'antd';
import { NavLink } from 'react-router-dom';
import * as ACTION_TYPE from '../../store/constant';
import logo from '../../static/images/dog_black.png';
import mazePng from '../../static/images/maze.png';
import './style.less';

const calcTime = time => {
	let timeX = moment(time).valueOf();
	let timeNow = moment().valueOf();
	let day = 24 * 60 * 60 * 1000;
	let hour = 60 * 60 * 1000;
	let min = 60 * 1000;
	let durTime = timeNow - timeX;
	if (durTime < 60 * min) {
		return moment(timeX)
			.startOf('min')
			.fromNow();
	} else if (60 * min <= durTime && durTime < 24 * hour) {
		return moment(timeX)
			.startOf('hour')
			.fromNow();
	} else if (24 * hour <= durTime && durTime < 7 * day) {
		return moment(timeX)
			.startOf('day')
			.fromNow();
	}
	return moment(timeX).format('YYYY-MM-DD HH:mm:ss');
};

class ArticleList extends Component {
	static get propTypes() {
		return {
			type: PropTypes.string,
			pageNumber: PropTypes.number,
			pageCount: PropTypes.number,
			count: PropTypes.number,
			getArticleList: PropTypes.func,
			addArticleList: PropTypes.func,
			articleList: PropTypes.array,
		};
	}
	addMore(pageNumber, pageCount) {
		let { addArticleList, type } = this.props;
		addArticleList(pageNumber, pageCount, type);
	}
	render() {
		let { articleList, pageNumber, pageCount, count } = this.props;
		return (
			<Row className="articleList">
				<Col sm={24} xl={17} order={2} className="leftBox">
					{articleList &&
						articleList.length > 0 &&
						articleList.map((item, index) => (
							<NavLink to={'/index/' + item._id} key={index}>
								<Card hoverable className="card">
									<h2 className="articleTitle">{item.title}</h2>
									{item.tags.map((im, i) => {
										const colors = ['magenta', 'volcano', 'red', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'];
										const color = im === 'coding' ? 'green' : colors[Math.ceil(Math.random() * 11)];
										return (
											<Tag color={color} key={i}>
												{im}
											</Tag>
										);
									})}
									<span className="time">
										{calcTime(item.created_at)}
										<span className="count">
											<Icon type="eye-o" />
											{item.lookCount}
										</span>
									</span>
								</Card>
							</NavLink>
						))}
					{articleList.length === 0 && (
						<p className="none">暂无文章，换个分类看看吧！</p>
					)}
					{articleList && articleList.length < count && 
					(<p className="loadMore" onClick={() => this.addMore(pageNumber + 1, pageCount)}>
							加载更多...
					</p>)}
				</Col>
				<Col sm={6} xl={6} offset={1} order={1} className="rightBox">
					<Card hoverable className="card">
						<h2 className="title">Justdodo</h2>
						<img src={logo} alt="DoDo" />
						<p className="desc">与你分享每一天，网站持续建设中</p>
						<p className="desc">QQ 790750172</p>
					</Card>
					
					<Card hoverable className="card">
						<NavLink to={'/index/maze'}>
							<img src={mazePng} alt="maze" />
							<p className="desc">好玩的迷宫</p>
						</NavLink>
					</Card>
				</Col>
			</Row>
		);
	}

	UNSAFE_componentWillMount() {
		const { articleList, getArticleList } = this.props;
		if (articleList.length === 0) {
			getArticleList();
		}
	}
}

const mapState = state => ({
	articleList: state.articleList,
	pageNumber: state.pageNumber,
	pageCount: state.pageCount,
	type: state.type,
	count: state.count
});

const mapDispatch = dispatch => ({
	getArticleList: (pageNumber = 1, pageCount = 10, type = '') => {
		axios
			.get(
				`https://api.justdodo.cn/acticles?pageNumber=${pageNumber}&pageCount=${pageCount}&type=${type}`
			)
			.then(res => {
				if (res && res.data.code === 1) {
					dispatch({
						type: ACTION_TYPE.ARTICLE_LIST,
						value: res.data.data
					});
				}
			});
	},
	addArticleList: (pageNumber, pageCount, type) => {
		let url = `https://api.justdodo.cn/acticles?pageNumber=${pageNumber}&pageCount=${pageCount}`;
		url = type ? url + `&type=${type}` : url;
		axios.get(url).then(res => {
			if (res && res.data.code === 1) {
				dispatch({
					type: ACTION_TYPE.ADD_ARTICLE_LIST,
					value: res.data.data
				});
			}
		});
	}
});

export default connect(
	mapState,
	mapDispatch
)(ArticleList);
